<template>
  <div class="body-container">
    {{ $t('translation.PageTitle') }}
    <button @click="showCalendar = true">显示日历</button>
    <button @click="changeLocale">切换语言</button>
    <p>{{ title }}</p>
    <div>
      <searchText 
        v-model="keyWord"
        :data="allData"
        clearable
        size="small"
        :placeholder="'检索内容'"
        @change="(list) => data = list"
      />
      <button @click="keyWord = 'fz'">检索 - {{ keyWord }}</button>
      <ul>
        <li v-for="item in data" :key="item.id">
        {{ item.text }}</li>
      </ul>
      <p style="color: red;">=================</p>
      <ul>
        <li v-for="item in allData" :key="item.id">
        {{ item.text }}</li>
      </ul>
      <p style="color: red;">=================</p>
    </div>
    <div>
      <div>
        <span>是否显示农历：</span>
        <input type="checkbox" v-model="isShowLunar" @change="changeIsShowLunar">
      </div>
      <span>日期选择方式：{{ textdsfsdfdsfdsfds }}</span>
      <label for="series">
        <input type="radio" name="model" value="series" id="series" @change="changeModel">
        series
      </label>
      <label for="single">
        <input type="radio" name="model" value="single" checked id="single" @change="changeModel">
        single
      </label>
      <label for="multiple">
        <input type="radio" name="model" value="multiple" id="multiple" @change="changeModel">
        multiple
      </label>
    </div>
    <div>
      <span>假期类型：</span>
      <label for="1">
        <input type="radio" name="holiday" value="月假" id="1" @change="changeHoliday">
        月假
      </label>
      <label for="2">
        <input type="radio" name="holiday" value="年假" id="2" @change="changeHoliday">
        年假
      </label>
      <label for="3">
        <input type="radio" name="holiday" value="陪同" id="3" @change="changeHoliday">
        陪同
      </label>
    </div>
    <div>
      <span>时间范围：</span>
      <label for="4">
        <input type="radio" name="time" value="上" id="4" @change="changeTime">
        上午
      </label>
      <label for="5">
        <input type="radio" name="time" value="下" id="5" @change="changeTime">
        下午
      </label>
      <label for="6">
        <input type="radio" name="time" value="全" id="6" @change="changeTime">
        全天
      </label>
    </div>
    <div>
      <span>选择之前为：</span>
      <input type="checkbox" v-model="isSelected">
      message: {{  isSelected }}
    </div>
    <div>
      <span>删除之前为：</span>
      <input type="checkbox" v-model="isDelected">
      message: {{  isDelected }}
    </div>
    <div>
      <span>单选时是否显示关闭图标：</span>
      <input type="checkbox" v-model="isSingleCloseTip">
      message: {{  isSingleCloseTip }}
    </div>
    <div>
      <span>设置开始和结束同一天：</span>
      <label for="7">
        <input type="radio" name="startEnd" value="始/终" checked id="7" @change="changeStartEnd">
        始/终
      </label>
      <label for="8">
        <input type="radio" name="startEnd" value="开/结" id="8" @change="changeStartEnd">
        开/结
      </label>
    </div>
    <button @click="nextFn">下一月</button>
    <button @click="prevFn">上一月</button>
    <button @click="toTargetDateFn">去三月</button>
    <button @click="getAllDate">获取所有选中日期</button>
    <button @click="clearDate">清空选中日期</button>
    <button @click="clearTargetDate">清空'2023-10-09'日期</button>
    <button @click="clearTargetSeriesDate">清空'2023-05-05至2023-05-08'日期</button>
    <button @click="setCheckedDatesFn">手动设置选中‘2023-5-18’</button>
    <button @click="setCheckedDatesMoreFn">手动设置选中'2023-5-08','2023-5-10','2023-5-09','2023-5-12'</button>
    <button @click="setCheckedDatesTipFn">手动设置选中日期并添加提示文字'2023-5-08'</button>
    <button @click="setCheckedDatesMoreTipFn">手动设置选中多个日期并添加提示文字'2023-5-02''2023-5-03''2023-5-05'</button>
    <button @click="setCheckedseriesDates">手动设置范围选中日期"2023-05-02至2023-05-10"</button>
    <button @click="setDefaultDate">添加默认选中值</button>
    <button @click="setConfig">修改配置</button>
    <button @click="updataDate">更新日期数据</button>
    <div v-if="showCalendar">
      <datePicker
        ref="calendar"
        :isShowTitle="true"
        :readOnly="false"
        :calendarMode="calendarMode"
        :selectMode="selectMode"
        :leftCornerText="leftCornerText"
        :rightCornerText="rightCornerText"
        :startEndCornerText="startEndCornerText"
        :initMonth="initMonth"
        :pickerOptions="options"
        :defaultSingleCheckedDates="defaultSingleCheckedDates"
        :defaultSeriesCheckedDates="defaultSeriesCheckedDates"
        :is-show-close-tip="isSingleCloseTip"
        @singleSelect="singleSelectFn"
        @seriesSelect="seriesSelectFn"
        @singleDelete="singleDeleteFn"
        @seriesDelete="seriesDeleteFn"
        @selectDate="selectDateFn"
        @deleteDate="deleteDateFn"
        @beforeSelect="beforeSelect"
        @beforeDelete="beforeDelete"
        @warningContainDate="containDateFn"
        @currentMonth="changeMonth"
        @nextMonth="changeMonth"
        @prevMonth="changeMonth"
      />
    </div>
  </div>
</template>

<script>
import { flat } from "./packages/datePicker/config/tools"
import { changeLanguage } from "./tools/i18n"
import moment from 'moment'
import i18n from './tools/i18n'
export default {
  data() {
    const cellFn = (date) => {
      const obj = this.cellClassItem.find(el => el === date.day)
      if (date.day === '2023-11-20') {
        console.log(date)
      }
      if(obj) {
        return 'cellClassName'
      }else{
        return ''
      }
    }
    return {
      showCalendar: true,
      title:"日历面板",
      textdsfsdfdsfdsfds :"测试",
      calendarMode:"Sunday",
      // calendarMode:"Monday",
      lunarHolidays: {'0518': '测试节日'},
      gregorianHolidays: {'1109': '开发节日', '0101': '元旦节'},
      defaultSingleCheckedDates: '2023-07-27',
      defaultSeriesCheckedDates:[[{
          day: '2023-05-27', 
          bottomCornerText: "",
          leftCornerText: "年假",
          rightCornerText: "下",
        },{
          day: '2023-05-24', 
          bottomCornerText: "",
          leftCornerText: "月假",
          rightCornerText: "上",
          disabled: true,
        },{
          day: '2023-05-28', 
          bottomCornerText: "",
          leftCornerText: "陪同",
          rightCornerText: "下",
        },{
          day: '2023-05-22', 
          bottomCornerText: "",
          leftCornerText: "陪同",
          rightCornerText: "下",
        }],[{
          day: '2023-05-20', 
          bottomCornerText: "",
          leftCornerText: "年假",
          rightCornerText: "下",
        }],[{
          day: '2023-05-10', 
          bottomCornerText: "",
          leftCornerText: "年假",
          rightCornerText: "下",
        }]],
      options: {
        cellClassName: (date) => {
          return cellFn(date)
        },
        disabledDate: () => false
      },
      cellClassItem: [],
      leftCornerText: '',
      rightCornerText: '',
      startEndCornerText: '开/关',
      selectMode: 'single',
      initMonth: new Date(),
      keyWord: '',
      allData: [{
        text: '和平打和平城和平城事',
        id: 1,
      },{
        text: '和谐的eng',
        id: 2,
      },{
        text: 'deng帝国稳定丽',
        id: 3,
      },{
        text: '发展den',
        id: 4,
      },{
        text: '和试试s时 色使deng',
        id: 221,
      },{
        text: '哈哈哈发展等eng',
        id: 22,
      },{
        text: '决定 顶级的大拿 任务',
        id: 51,
      },{
        text: 'dsdf绝地反击打单',
        id: 5,
      },{
        text: '和平ha社会说',
        id: 6,
      },{
        text: 'hp和平ha社会行西安',
        id: 7,
      },{
        text: '西藏旅游归来时',
        id: 18,
      },{
        text: 'ha和ddd平ha社会行',
        id: 8,
      },{
        text: '郑新川（100089089）',
        id: 9,
      },],
      data: [],
      isDelected: true,
      isSelected: true,
      isSingleCloseTip: true,
      num: 0,
      isShowLunar: true
    }
  },
  created () {
    this.data = this.allData;
    const li = moment(new Date('2023-12'))
    console.log(li.add(1, 'months').format('YYYY-MM'))
    console.log(moment('2023-09-01').isBefore('2023-09-08', 'day'))
    console.log(moment('2023-12-07').isBefore('2023-09-08', 'day'))
    console.log(moment('2023-5-14').weekday())
    const arr = [1,2,3,4,5,[7,8,9,[10,11,12,[13,14,15]]]]
    console.log(flat(arr, 2))
    // setTimeout(() => {
    //   console.log(2222)
    //   this.cellClassItem = ['2023-11-12']
    //   this.$refs.calendar.createCalendar()
    // }, 800);
  },
  mounted () {
    this.$refs.calendar.toTargetDate('2023-11');
  },
  methods: {
    changeLocale() {
      console.log(this)
      console.log(this.$i18n.locale)
      // i18n.locale = 'en_US'
      console.log(i18n.t('translation.PageTitle'))
      this.$setPluginLocale('en')
      changeLanguage('en_US', this.$i18n)
    },
    changeIsShowLunar() {
      this.$nextTick(() => {
        this.$refs.calendar.createCalendar()
      })
    },
    changeMonth(date) {
      console.log(date)
    },
    updataDate() {
      this.$refs.calendar.updataDate([
        // {day: '2023-11-21', cellClassName22: 'blue', rightCornerText: '上', leftCornerText: '事', bottomCornerText: '自定'+this.num, readOnly: true},
        // {day: '2023-11-20', cellClassName1: 'blue', rightCornerText: '上', leftCornerText: '事', bottomCornerText: '自定义'+this.num },
        // {day: '2023-11-13', cellClassName3: 'red', rightCornerText: '下', leftCornerText: '年', bottomCornerText: '自'+this.num },
        {day: '2023-11-14', applying: false, rightCornerText: '', leftCornerText: '', bottomCornerText: '', isUpdateDate: true, readOnly: true, rehireStatus: undefined, toastMessage: "" },
      ])
      this.num += 1
      // this.$refs.calendar.setCheckedDates([{day: '2023-10-30', cellClassName: 'blue', rightCornerText: '上', leftCornerText: '事', bottomCornerText: '自定义', readOnly: true}])
    },
    setConfig() {
      this.options.disabledDate = (date) => {
          return moment('2023-12-12').isBefore(date.day, 'days')
      }
      this.options.cellClassName = (date) => {
          return date.day === '2023-12-11' ? 'selgf-li': ''
      }
      console.log(this.options)
      this.$nextTick(() => {
        this.$refs.calendar.updataDate()
      })
    },
    setDefaultDate() {
      this.defaultSingleCheckedDates= '2023-07-11'
    },
    containDateFn(obj) {
      console.log(obj)
    },
    selectDateFn(obj) {
      console.log('======')
      console.log(obj)
      console.log('======')
    },
    deleteDateFn(obj) {
      console.log(obj)
    },
    beforeSelect(item, call) {
      console.log(item)
      call(this.isSelected)
    },
    beforeDelete(item, call) {
      console.log(item)
      call(this.isDelected)
    },
    changeModel (value) {
      console.log(value.target.value)
      this.selectMode = value.target.value
    },

    changeHoliday (value) {
      console.log(value.target.value)
      this.leftCornerText = value.target.value
    },

    changeTime(value) {
      console.log(value.target.value)
      this.rightCornerText = value.target.value
    },

    changeStartEnd(value) {
      console.log(value.target.value)
      this.startEndCornerText = value.target.value
    },

    singleSelectFn(date, dateList) {
      console.log(date)
      console.log(dateList)
    },

    seriesSelectFn(date, dateList) {
      console.log(date)
      console.log(dateList)
    },

    singleDeleteFn(date) {
      console.log(date)
    },

    seriesDeleteFn(date, dateList) {
      console.log(date)
      console.log(dateList)
    },

    nextFn() {
      this.$refs.calendar.nextMonth()
    },

    prevFn() {
     this.options.disabledDate = (date) => {
        console.log('===+++++')
        if(date.day === '2022-11-12'){
          return true
        }else{
          return false
        }
      }
      this.$refs.calendar.prevMonth()
      this.updataDate()
    },

    toTargetDateFn() {
      this.$refs.calendar.toTargetDate('2022-03')
    },

    getAllDate() {
      const obj = this.$refs.calendar.getAllSelectedDate()
      console.log(obj)
      obj.allDate.forEach(element => {
      console.log(element.day)
      });
    },

    clearDate() {
      this.$refs.calendar.clearSelectedDate()
    },

    clearTargetDate() {
      this.$refs.calendar.clearSelectedDate('2023-10-09')
    },

    clearTargetSeriesDate() {
      this.$refs.calendar.clearSelectedDate(['2023-5-05', '2023-5-06', '2023-5-07', '2023-5-08'])
    },

    setCheckedDatesFn() {
      this.$refs.calendar.setCheckedDates('2023-5-18')
    },

    setCheckedDatesMoreFn() {
      this.$refs.calendar.setCheckedDates(['2023-5-08','2023-5-10','2023-5-09','2023-5-12'])
    },

    setCheckedDatesTipFn() {
      this.$refs.calendar.setCheckedDates({
        day: '2023-5-08', 
        bottomCornerText: "",
        leftCornerText: "年假",
        rightCornerText: "下",
      })
    },

    setCheckedDatesMoreTipFn() {
      this.$refs.calendar.setCheckedDates([{
        day: '2023-5-5', 
        bottomCornerText: "",
        leftCornerText: "年假",
        rightCornerText: "下",
      },{
        day: '2023-5-02', 
        bottomCornerText: "",
        leftCornerText: "月假",
        rightCornerText: "上",
        disabled: true,
      },{
        day: '2023-5-03', 
        bottomCornerText: "",
        leftCornerText: "陪同",
        rightCornerText: "下",
      }])
    },
    setCheckedseriesDates() {
this.defaultSeriesCheckedDates = [
    {
        "lYear": 2023,
        "lMonth": 3,
        "lDay": 13,
        "Animal": "兔",
        "IMonthCn": "三月",
        "IDayCn": "十三",
        "cYear": 2023,
        "cMonth": 5,
        "cDay": 2,
        "gzYear": "癸卯",
        "gzMonth": "丙辰",
        "gzDay": "庚申",
        "isToday": false,
        "isLeap": false,
        "nWeek": 2,
        "ncWeek": "星期二",
        "weekOfYear": "第19周",
        "isTerm": false,
        "Term": null,
        "astro": "金牛座",
        "vacation": null,
        "day": "2023-05-02",
        "disabled": false,
        "cellClassName": "",
        "isSingleClick": true,
        "isSingleCenterClick": false,
        "isStartDate": false,
        "isSeriesMiddle": false,
        "bottomCornerText": "开始",
        "leftCornerText": "",
        "rightCornerText": "",
        "isCurrentMonth": true
    },
    {
        "lYear": 2023,
        "lMonth": 3,
        "lDay": 14,
        "Animal": "兔",
        "IMonthCn": "三月",
        "IDayCn": "十四",
        "cYear": 2023,
        "cMonth": 5,
        "cDay": 3,
        "gzYear": "癸卯",
        "gzMonth": "丙辰",
        "gzDay": "辛酉",
        "isToday": false,
        "isLeap": false,
        "nWeek": 3,
        "ncWeek": "星期三",
        "weekOfYear": "第19周",
        "isTerm": false,
        "Term": null,
        "astro": "金牛座",
        "vacation": null,
        "day": "2023-05-03",
        "disabled": false,
        "cellClassName": "",
        "isSingleClick": false,
        "isSingleCenterClick": true,
        "isStartDate": false,
        "isSeriesMiddle": true,
        "bottomCornerText": "",
        "leftCornerText": "",
        "rightCornerText": "",
        "isCurrentMonth": true
    },
    {
        "lYear": 2023,
        "lMonth": 3,
        "lDay": 15,
        "Animal": "兔",
        "IMonthCn": "三月",
        "IDayCn": "十五",
        "cYear": 2023,
        "cMonth": 5,
        "cDay": 4,
        "gzYear": "癸卯",
        "gzMonth": "丙辰",
        "gzDay": "壬戌",
        "isToday": false,
        "isLeap": false,
        "nWeek": 4,
        "ncWeek": "星期四",
        "weekOfYear": "第19周",
        "isTerm": false,
        "Term": null,
        "astro": "金牛座",
        "vacation": "青年节",
        "day": "2023-05-04",
        "disabled": false,
        "cellClassName": "",
        "isSingleClick": false,
        "isSingleCenterClick": true,
        "isStartDate": false,
        "isSeriesMiddle": true,
        "bottomCornerText": "",
        "leftCornerText": "",
        "rightCornerText": "",
        "isCurrentMonth": true
    },
    {
        "lYear": 2023,
        "lMonth": 3,
        "lDay": 16,
        "Animal": "兔",
        "IMonthCn": "三月",
        "IDayCn": "十六",
        "cYear": 2023,
        "cMonth": 5,
        "cDay": 5,
        "gzYear": "癸卯",
        "gzMonth": "丙辰",
        "gzDay": "癸亥",
        "isToday": false,
        "isLeap": false,
        "nWeek": 5,
        "ncWeek": "星期五",
        "weekOfYear": "第19周",
        "isTerm": false,
        "Term": null,
        "astro": "金牛座",
        "vacation": null,
        "day": "2023-05-05",
        "disabled": false,
        "cellClassName": "",
        "isSingleClick": false,
        "isSingleCenterClick": true,
        "isStartDate": false,
        "isSeriesMiddle": true,
        "bottomCornerText": "",
        "leftCornerText": "",
        "rightCornerText": "",
        "isCurrentMonth": true
    },
    {
        "lYear": 2023,
        "lMonth": 3,
        "lDay": 17,
        "Animal": "兔",
        "IMonthCn": "三月",
        "IDayCn": "十七",
        "cYear": 2023,
        "cMonth": 5,
        "cDay": 6,
        "gzYear": "癸卯",
        "gzMonth": "丁巳",
        "gzDay": "甲子",
        "isToday": false,
        "isLeap": false,
        "nWeek": 6,
        "ncWeek": "星期六",
        "weekOfYear": "第19周",
        "isTerm": true,
        "Term": "立夏",
        "astro": "金牛座",
        "vacation": null,
        "day": "2023-05-06",
        "disabled": false,
        "cellClassName": "",
        "isSingleClick": false,
        "isSingleCenterClick": true,
        "isStartDate": false,
        "isSeriesMiddle": true,
        "bottomCornerText": "",
        "leftCornerText": "",
        "rightCornerText": "",
        "isCurrentMonth": true
    },
    {
        "lYear": 2023,
        "lMonth": 3,
        "lDay": 18,
        "Animal": "兔",
        "IMonthCn": "三月",
        "IDayCn": "十八",
        "cYear": 2023,
        "cMonth": 5,
        "cDay": 7,
        "gzYear": "癸卯",
        "gzMonth": "丁巳",
        "gzDay": "乙丑",
        "isToday": false,
        "isLeap": false,
        "nWeek": 7,
        "ncWeek": "星期日",
        "weekOfYear": "第19周",
        "isTerm": false,
        "Term": null,
        "astro": "金牛座",
        "vacation": null,
        "day": "2023-05-07",
        "disabled": false,
        "cellClassName": "",
        "isSingleClick": false,
        "isSingleCenterClick": true,
        "isStartDate": false,
        "isSeriesMiddle": true,
        "bottomCornerText": "",
        "leftCornerText": "",
        "rightCornerText": "",
        "isCurrentMonth": true
    },
    {
        "lYear": 2023,
        "lMonth": 3,
        "lDay": 19,
        "Animal": "兔",
        "IMonthCn": "三月",
        "IDayCn": "十九",
        "cYear": 2023,
        "cMonth": 5,
        "cDay": 8,
        "gzYear": "癸卯",
        "gzMonth": "丁巳",
        "gzDay": "丙寅",
        "isToday": false,
        "isLeap": false,
        "nWeek": 1,
        "ncWeek": "星期一",
        "weekOfYear": "第20周",
        "isTerm": false,
        "Term": null,
        "astro": "金牛座",
        "vacation": null,
        "day": "2023-05-08",
        "disabled": false,
        "cellClassName": "",
        "isSingleClick": false,
        "isSingleCenterClick": true,
        "isStartDate": false,
        "isSeriesMiddle": true,
        "bottomCornerText": "",
        "leftCornerText": "",
        "rightCornerText": "",
        "isCurrentMonth": true
    },
    {
        "lYear": 2023,
        "lMonth": 3,
        "lDay": 20,
        "Animal": "兔",
        "IMonthCn": "三月",
        "IDayCn": "二十",
        "cYear": 2023,
        "cMonth": 5,
        "cDay": 9,
        "gzYear": "癸卯",
        "gzMonth": "丁巳",
        "gzDay": "丁卯",
        "isToday": false,
        "isLeap": false,
        "nWeek": 2,
        "ncWeek": "星期二",
        "weekOfYear": "第20周",
        "isTerm": false,
        "Term": null,
        "astro": "金牛座",
        "vacation": null,
        "day": "2023-05-09",
        "disabled": false,
        "cellClassName": "",
        "isSingleClick": false,
        "isSingleCenterClick": true,
        "isStartDate": false,
        "isSeriesMiddle": true,
        "bottomCornerText": "",
        "leftCornerText": "",
        "rightCornerText": "",
        "isCurrentMonth": true
    },
    {
        "lYear": 2023,
        "lMonth": 3,
        "lDay": 21,
        "Animal": "兔",
        "IMonthCn": "三月",
        "IDayCn": "廿一",
        "cYear": 2023,
        "cMonth": 5,
        "cDay": 10,
        "gzYear": "癸卯",
        "gzMonth": "丁巳",
        "gzDay": "戊辰",
        "isToday": false,
        "isLeap": false,
        "nWeek": 3,
        "ncWeek": "星期三",
        "weekOfYear": "第20周",
        "isTerm": false,
        "Term": null,
        "astro": "金牛座",
        "vacation": null,
        "day": "2023-05-10",
        "disabled": false,
        "cellClassName": "",
        "isSingleClick": true,
        "isSingleCenterClick": false,
        "isStartDate": false,
        "isSeriesMiddle": false,
        "bottomCornerText": "结束",
        "leftCornerText": "",
        "rightCornerText": "",
        "isCurrentMonth": true
    }
]
    }
  },
}
</script>

<style scoped lang="scss">
.body-container {
  padding: 10px 30px;
}
:deep(.cellClassName) {
  color: red;
  background-color: #fbb5b5;

  .w-date-day {
    color: red;
  }
}

ul {
  list-style: inside;
}

</style>
